<template>
	<div>
		<div class="aui-row hot_recommend homefeaturedgood" style="margin-bottom: 0.4rem;">
			<div class="aui-col-xs-6 featuredgoodimg" v-if="dataList && dataList.length>0" v-for="(item, index) in arraydata" :key="index">
				<img :src="item.publicityPicture||'static/image/demo1.png'" @click='jumpEvent(item)' />
			</div>
			<div v-if="dataList.length==0 && env === 'edit'" style="height: 2.0rem;line-height: 2.0rem;">请设置图片数据</div>
		</div>
	</div>
</template>


<script>
import handlePath from "../../utils/lxn/handlePath"
	export default {
		props: {
			dataList: {
				type: Array,
				default: () => []
			},
		},
		data() {
			return {
				arraydata: []
			}
		},
		computed: {
			env() {
				return window.environment; // 获取是否是编辑状态
			},
		},
		methods: {
			fivedata() {
				var arraydata1 = []
				let length = this.dataList.length < 5 ? this.dataList.length : 5
				for(var i = 0; i < length; i++) {
					arraydata1.push(this.dataList[i])
				}
				// this.arraydata = arraydata1.reverse()
				this.arraydata = arraydata1
			},
			jumpEvent(item) {
				// if(item.extendField) {
				// 	var urldata = JSON.parse(item.extendField).url.path
				// 	this.$router.push({
				// 		path: urldata
				// 	})
				// }
				handlePath(item) && this.$router.push(handlePath(item));
			},
		},
		watch: {
			dataList() {
				this.fivedata()
			}
		},
		mounted() {
			this.fivedata()
		}
	}
</script>

<style>
	.hot_recommend {
		margin-right: 0px;
	}
	
	.hot_recommend img {
		height: auto;
		width: auto;
	}
	
	.homefeaturedgood {
		background-color: #fff;
		margin-bottom: 0rem;
		padding: 0.65rem;
	}
	
	.homefeaturedgood .featuredgoodimg {
		width: 30%;
		padding: 0.1rem;
		height: 4.55rem;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.homefeaturedgood .featuredgoodimg img {
		position: relative;
		height: 100%;
		width: 100%;
	}
	
	.hot_recommend .aui-col-xs-6 {
		border: none;
	}
	
	.homefeaturedgood .featuredgoodimg:first-child,
	.homefeaturedgood .featuredgoodimg:nth-child(2),
	.homefeaturedgood .featuredgoodimg:nth-child(4) {
		border: none;
	}
	
	.homefeaturedgood .featuredgoodimg:first-child {
		width: 40%;
		height: 9.1rem;
	}
	
	.homefeaturedgood .featuredgoodimg:first-child img {
		max-height: 9.1rem;
		max-width: 100%;
	}
</style>